<template>
  <footer class="border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900/50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- 品牌信息 -->
        <div class="col-span-1 md:col-span-2">
          <div class="flex items-center space-x-2 mb-4">
            <SiteLogo :size="32" class="flex-shrink-0" />
            <span class="text-xl font-bold gradient-text">DevToolsNav</span>
          </div>
          <p class="text-gray-600 dark:text-gray-400 mb-4">
            精选开发者工具导航平台，发现最好用的开发工具，提升开发效率
          </p>
          <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-500 hover:text-primary-600 transition-colors">
              <Icon name="mdi:github" class="w-6 h-6" />
            </a>
            <a href="#" class="text-gray-500 hover:text-primary-600 transition-colors">
              <Icon name="mdi:twitter" class="w-6 h-6" />
            </a>
            <a href="#" class="text-gray-500 hover:text-primary-600 transition-colors">
              <Icon name="mdi:wechat" class="w-6 h-6" />
            </a>
          </div>
        </div>

        <!-- 快速链接 -->
        <div>
          <h3 class="font-semibold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><NuxtLink to="/tools" class="footer-link">工具库</NuxtLink></li>
            <li><NuxtLink to="/articles" class="footer-link">博客文章</NuxtLink></li>
            <li><NuxtLink to="/pricing" class="footer-link">会员价格</NuxtLink></li>
          </ul>
        </div>

        <!-- 关于 -->
        <div>
          <h3 class="font-semibold mb-4">关于</h3>
          <ul class="space-y-2">
            <li><span class="text-gray-600 dark:text-gray-400">© 2025 DevToolsHub</span></li>
            <li><span class="text-gray-600 dark:text-gray-400">开发者工具导航</span></li>
          </ul>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-800">
        <p class="text-center text-gray-500 text-sm">
          © {{ new Date().getFullYear() }} DevToolsHub. All rights reserved.
        </p>
      </div>
    </div>
  </footer>
</template>

<style scoped>
.footer-link {
  @apply text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors;
}
</style>


